<template>
    <div class="cultural">
        <div class="cultural-body f f-jb pd-20">
            <div class="cultural-left">
                <div class="left-title f f-ac"><img src="@/assets/fire.png" />导航菜单</div>
                <div class="mt-10">
                    <!-- v-for="(i, k) in navList" :key="k" -->
                    <div class="nav-title">{{ navList.title || "-" }}</div>
                    <div class="nav-item" v-for="(a, b) in navList.children" :key="b" 
                        :class="{ 'nav-checked': a.id == current }" @click="handleNav(a)">
                        {{ a.name || "-" }}
                    </div>
                </div>
            </div>
            <div class="cultural-right">
                <!-- 动态 -->
                <Trends-list v-if="current == '1'" />
                <!-- 传承人 -->
                <InheritList v-if="current == '2'" />
                <!-- 项目 -->
                <Project-list v-if="current == '3' || current == '5' " />
                <!-- 法规 -->
                <Law-list v-if="current == '4' || current == '0' " />
            </div>
        </div>
    </div>
</template>

<script>
    import TrendsList from "@/views/intangibleCultural/cp/TrendsList";
    import InheritList from "@/views/intangibleCultural/cp/InheritList";
    import ProjectList from "@/views/intangibleCultural/cp/ProjectList";
    import LawList from "@/views/intangibleCultural/cp/LawList";
    import {
        heritageCategory,
        heritageList
    } from "@/utils/heritage/index.js";
    export default {
        components: {
            TrendsList,
            InheritList,
            ProjectList,
            LawList,
        },
        data() {
            return {
                typeList: [],
                current: "0", // 当前选中的导航
                navList: {
                    title: "品非遗",
                    // children: [{
                    //         label: "非遗动态",
                    //         id: "trends"
                    //     },
                    //     {
                    //         label: "非遗传承人",
                    //         id: "inherit"
                    //     },
                    //     {
                    //         label: "非遗项目",
                    //         id: "project"
                    //     },
                    //     {
                    //         label: "非遗法规",
                    //         id: "law"
                    //     },
                    // ],
                },
            };
        },
        watch: {
            "$route.query"(v) {
                this.current = v.type || "trends";
            },
        },
        created() {
            this.getTypeList();
        },
        mounted() {
            this.current = this.$route.query.type || "trends";
        },
        methods: {
            // 获取活动分类
            getTypeList() {
                let that = this
                heritageCategory().then((response) => {
                    if (response.code == 200) {
                        response.data.unshift({
                            id: '0',
                            // pid: 0,
                            name: "全部",
                            order:0
                        });
                        this.$set(that.navList, 'children', response.data)
                        console.log(that.navList,'navList')
                    }
                });
            },
            // 导航切换
            handleNav(item) {
                console.log(item, 'item', this.$route.path)
                this.current = item.id;
                this.$router.push({
                    path: this.$route.path,
                    query: {
                        type: item.id,
                    },
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .cultural {
        width: 100%;

        &-body {
            width: 1200px;
            min-height: 200px;
            margin: auto;

            .cultural-left {
                width: 284px;
                height: 100%;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(217, 217, 217, 0.3);

                .left-title {
                    color: #333;
                    font-size: 16px;
                    font-weight: 600;
                    padding: 20px;
                    border-bottom: 1px solid #d9d9d980;

                    >img {
                        width: 13px;
                        height: 15px;
                        margin-right: 10px;
                    }
                }

                .nav-title {
                    width: 100%;
                    height: 42px;
                    line-height: 42px;
                    color: #fff;
                    font-size: 14px;
                    padding-left: 43px;
                    box-sizing: border-box;
                    background-color: #466ec5;
                    position: relative;

                    &::after {
                        content: "";
                        display: inline-block;
                        position: absolute;
                        right: 0;
                        width: 3px;
                        height: 42px;
                        background-color: #193980;
                    }
                }

                .nav-item {
                    width: 100%;
                    height: 42px;
                    line-height: 42px;
                    color: #909090;
                    padding-left: 43px;
                    box-sizing: border-box;

                    &:hover {
                        cursor: pointer;
                        background-color: rgba(129, 153, 211, 0.21);
                        color: #193980;
                    }
                }

                .nav-checked {
                    color: #193980;
                    background-color: rgba(129, 153, 211, 0.21);
                }
            }

            .cultural-right {
                width: 892px;
                height: 100%;
            }
        }
    }
</style>